<template>
  <div class="packages">
    <div class="container">
      <div class="aside">

        <div ref="refsTable">
          <el-form :inline="true" label-width="68px">
            <div style="display: inline;">
              <el-form-item prop="timeType">
                <el-select v-model="params.timeType" clearable style="width:90px;margin-right:3px ">
                  <el-option value label="全部"></el-option>
                  <el-option v-for="item in dateList" :key="item.id" :label="item.title" :value="item.id" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-date-picker v-model="value1" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
                value-format="yyyy-MM-dd HH:mm:ss" @change="timeChange1" border style="width:409px"
                :default-time="['00:00:00', '23:59:59']" :picker-options="pickerOptions"></el-date-picker>
                <!-- <el-date-picker v-model="value1" style="width: 230px;margin-left:-2px" value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期"
                  end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker> -->
              </el-form-item>
            </div>

            <!-- <el-form-item label="收样日期">
              <el-date-picker v-model="value1" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
                value-format="yyyy-MM-dd HH:mm:ss" @change="timeChange1" border style="width:409px"
                :default-time="['00:00:00', '23:59:59']"></el-date-picker>
            </el-form-item> -->
            <!-- <el-row style="display:flex;flex-wrap:wrap"> -->


            <!-- <el-col :span='12'> -->
            <el-form-item label="项目类型">
              <el-autocomplete class="inline-input" v-model="params.projectType" :fetch-suggestions="querySearch"
                placeholder="请选择" @select="handleSelect" @focus="change(0)" style="width:183px"
                clearable></el-autocomplete>
              <!-- <el-select v-model="params.projectTypeId" placeholder="请选择" style="width:183px">
                  <el-option value label="全部"></el-option>
                  <el-option v-for="item in Arr.projectTypeArr" :key="item.id" :label="item.name"
                    :value="item.id"></el-option>
                </el-select> -->
            </el-form-item>
            <!-- </el-col> -->
            <!-- <el-col :span='12'> -->
            <el-form-item label="条码号">
              <!-- <el-autocomplete
              class="inline-input"
              v-model="params.barcodeCode"
              :fetch-suggestions="querySearch"
              placeholder="请输入条码号"
              @select="handleSelect"
              @focus="change(0)"
              style="width:183px"
              clearable
            ></el-autocomplete> -->
              <el-input v-model="params.barcodeCode" placeholder="请输入条码号" style="width:183px" clearable></el-input>
            </el-form-item>
            <!-- </el-col> -->
            <!-- <el-col :span='12'> -->
            <el-form-item label="送检单位">
              <el-input v-model="params.inspectionUnit" placeholder="请输入送检单位" style="width:183px" clearable></el-input>
              <!-- <el-select v-model="params.inspectionUnit" placeholder="请选择" style="width:183px">
                <el-option value label="全部"></el-option>
                <el-option v-for="item in Arr.projectTypeArr" :key="item.id" :label="item.name"
                  :value="item.id"></el-option>
              </el-select> -->
            </el-form-item>
            <!-- </el-col> -->

            <!-- <el-col :span='12'> -->
            <el-form-item label="患者姓名">
              <el-input v-model="params.submitName" placeholder="请输入姓名" clearable style="width:183px"></el-input>
            </el-form-item>
            <!-- </el-col> -->
            <!-- <el-col :span='12'> -->
            <el-form-item label="样本状态">
              <el-select v-model="params.mainState" placeholder="请选择" style="width:183px">
                <el-option value label="全部"></el-option>
                <el-option v-for="(value, key) in mainStateObj" :key="key" :label="value" :value="key"></el-option>
              </el-select>
            </el-form-item>
            <!-- </el-col> -->
            <!-- <el-col :span='12'> -->
            <el-form-item label="手机号">
              <el-input v-model="params.phone" placeholder="请输入手机号" style="width:183px" clearable></el-input>
            </el-form-item>
            <!-- </el-col> -->
            <!-- </el-row> -->

          </el-form>
          <div style="display:flex;justify-content:space-between;padding:5px 10px 10px 0">
            <div>
              <el-button size="mini" type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
            </div>
            <span style="color:#0066ff;cursor:pointer;" @click="openMoreDialog">更多</span>
          </div>


          <el-form :inline="true">
            <el-form-item>
              <el-dropdown trigger="click" placement="bottom" @command="handleCommand">
                <el-button size="mini" type="primary">
                  报告打印
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="A4纸打印">A4纸打印</el-dropdown-item>
                  <el-dropdown-item command="A5纸打印">A5纸打印</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-form-item>
            <el-form-item>
              <el-dropdown trigger="click" placement="bottom" @command="handleCommand">
                <el-button size="mini" type="primary">
                  报告导出
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="1">单独导出</el-dropdown-item>
                  <el-dropdown-item command="2">合并导出</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-form-item>
            
            <el-form-item style="float:right">
              <el-dropdown trigger="click" placement="bottom">
                <el-button size="mini" type="primary">
                  导出
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="handleExport('now')">导出当前</el-dropdown-item>
                  <el-dropdown-item @click.native="handleExport('all')">导出全部</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-form-item>
            <el-form-item style="float:right">
              <el-dropdown trigger="click" @click="openDropdown" :hide-on-click="false" ref="dropdown"
            style="margin-right: 10px;">
            <el-button type="primary" size="mini">
              自定义列<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown" style="padding-left: 20px;height: 300px; overflow-y: auto;">
              <el-form>
                <el-form-item>
                  <el-button @click="chooseTitle" type="primary" size="mini">
                确定
              </el-button>
                </el-form-item>
              </el-form>
              
              <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">显示全部
              </el-checkbox>                
              <div ></div>
              <el-checkbox-group v-model="checkedTitle" style="display: flex;flex-direction: column;"
                @change="handleCheckedCitiesChange">
                <el-checkbox v-for="city in tableTitle" :label="city" :key="city"></el-checkbox>
              </el-checkbox-group>
              
            </el-dropdown-menu>
          </el-dropdown>
            </el-form-item>
          </el-form>

        </div>

        <!-- <div style="height:250px;overflow-y:auto"> -->
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange"
          border :header-cell-style="{
  background: '#ebebeb'
}" highlight-current-row  v-loading="loading" @row-click="handleTableClick" :height="heights">
          <el-table-column align="center" type="selection" width="50"></el-table-column>
          <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
          <el-table-column width="120" align="center" label="条码号" prop="barcodeCode" v-if="this.sureTitle.indexOf(tableTitle[0]) != -1"></el-table-column>
          <el-table-column width="80" align="center" prop="submitName" label="患者姓名" v-if="this.sureTitle.indexOf(tableTitle[1]) != -1"></el-table-column>
          <el-table-column width="150" align="center" prop="inspectionUnit" label="送检单位"
            show-overflow-tooltip v-if="this.sureTitle.indexOf(tableTitle[2]) != -1"></el-table-column>
          <el-table-column width="100" align="center" prop="mainState" label="样本状态" v-if="this.sureTitle.indexOf(tableTitle[3]) != -1">
            <template slot-scope="{row}">{{ mainStateObj[row.mainState] }}</template>
          </el-table-column>
          <el-table-column width="150" align="center" prop="sampleTypeName" label="项目类型"
            show-overflow-tooltip v-if="this.sureTitle.indexOf(tableTitle[4]) != -1"></el-table-column>
          <el-table-column width="160" align="center" prop="collectorTime" label="收样日期" v-if="this.sureTitle.indexOf(tableTitle[5]) != -1"></el-table-column>
          <el-table-column width="160" align="center" prop="inputDate" label="入库日期"
            show-overflow-tooltip v-if="this.sureTitle.indexOf(tableTitle[6]) != -1"></el-table-column>
          <el-table-column width="160" align="center" prop="" label="报告日期" v-if="this.sureTitle.indexOf(tableTitle[7]) != -1"></el-table-column>
          <el-table-column width="80" align="center" prop="sex" label="患者性别" v-if="this.sureTitle.indexOf(tableTitle[8]) != -1">
            <template slot-scope="{row}">
              {{ sexObj[row.sex] }}
            </template>
          </el-table-column>
          <el-table-column width="80" align="center" prop="targetAge" label="患者年龄" v-if="this.sureTitle.indexOf(tableTitle[9]) != -1"></el-table-column>
          <el-table-column show-overflow-tooltip width="150" align="center" prop="sampleTypeName" label="样本类型" v-if="this.sureTitle.indexOf(tableTitle[10]) != -1"></el-table-column>
          <el-table-column width="100" align="center" prop="nucleicTypeName" label="核酸类型" v-if="this.sureTitle.indexOf(tableTitle[11]) != -1"></el-table-column>
          <el-table-column width="150" align="center" prop="experimentalStatus" label="是否符合实验" v-if="this.sureTitle.indexOf(tableTitle[12]) != -1" >
            <template slot-scope="{row}">{{ row.experimentalStatus == 1 ? '符合要求' : '未符合要求' }}</template>
          </el-table-column>
          <el-table-column width="150" align="center" prop="wardMame" label="区域" v-if="this.sureTitle.indexOf(tableTitle[13]) != -1"></el-table-column>
          <el-table-column width="150" align="center" prop="name" label="结果状态" v-if="this.sureTitle.indexOf(tableTitle[14]) != -1"></el-table-column>
          <el-table-column width="150" align="center" prop="departmentName" label="科室" v-if="this.sureTitle.indexOf(tableTitle[15]) != -1"></el-table-column>
          <el-table-column width="100" align="center" prop="applyDoctorName" label="送检医生" v-if="this.sureTitle.indexOf(tableTitle[16]) != -1"></el-table-column>
          <el-table-column width="150" align="center" prop="doctorPhone" label="医生电话" v-if="this.sureTitle.indexOf(tableTitle[17]) != -1"></el-table-column>
          <el-table-column width="100" align="center" prop="recordName" label="录单员" v-if="this.sureTitle.indexOf(tableTitle[18]) != -1"></el-table-column>
          <el-table-column width="150" align="center" prop="dnaResults" label="DNA结果" v-if="this.sureTitle.indexOf(tableTitle[19]) != -1"></el-table-column>
          <el-table-column width="150" align="center" prop="dnaDetectablePathogen" label="DNA检出病原" v-if="this.sureTitle.indexOf(tableTitle[20]) != -1"></el-table-column>
          <el-table-column width="150" align="center" prop="rnaResults" label="RNA结果" v-if="this.sureTitle.indexOf(tableTitle[21]) != -1"></el-table-column>
          <el-table-column width="150" align="center" prop="rnaDetectablePathogen" label="RNA检出病原" v-if="this.sureTitle.indexOf(tableTitle[22]) != -1"></el-table-column>
          <el-table-column width="150" align="center" prop="dnaReporting" label="DNA报告" v-if="this.sureTitle.indexOf(tableTitle[23]) != -1" show-overflow-tooltip>
            <template slot-scope="{row}">
          <a :href='row.dnaReporting' target="blank" style="color:#0186ef" v-show="row.dnaReporting">报告附件</a>
        </template>
          </el-table-column>
          <el-table-column width="150" align="center" prop="rnaReporting" label="RNA报告" v-if="this.sureTitle.indexOf(tableTitle[24]) != -1" show-overflow-tooltip>
            <template slot-scope="{row}">
          <a :href='row.rnaReporting' target="blank" style="color:#0186ef" v-show="row.rnaReporting">报告附件</a>
        </template>
          </el-table-column>
          <el-table-column width="150" align="center" prop="remark" label="备注" v-if="this.sureTitle.indexOf(tableTitle[25]) != -1"></el-table-column>
        </el-table>
        <!-- </div> -->
        <div style="height:80px"></div>
        <div class="block">
          <div>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :page-sizes="[20, 50, 100, 200, 500]" layout="total, sizes, prev, pager, next, jumper" :total="listTotal"
              background></el-pagination>
          </div>
        </div>
        <el-dialog :visible.sync="moreDialog" style="margin-top:15vh;" title="更多" width="650px">
          <el-form :inline="true" label-width="70px">
            <el-form-item label="录单员">
              <el-input placeholder="请输入姓名" v-model="params.recordName" style="width:210px"></el-input>
              <!-- <el-select v-model="params.recordName" placeholder="请选择" style="width:210px">
                <el-option value label="全部"></el-option>
                <el-option
                  v-for="item in [{id:0,name:'录单员1'},{id:1,name:'录单员2'},{id:2,name:'录单员3'}]"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select> -->
            </el-form-item>
            <el-form-item label="样本类型">
              <el-select v-model="params.sampleTypeName" placeholder="请选择" style="width:210px">
                <el-option value label="全部"></el-option>
                <el-option v-for="item in Arr.sampleTypeArr" :key="item.id" :label="item.name"
                  :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="科室">
              <el-input placeholder="请输入姓名" v-model="params.departmentCategory" style="width:210px"></el-input>
              <!-- <el-select v-model="params.departmentCategory" placeholder="请选择" style="width:210px">
                
                <el-option value label="全部"></el-option>
                <el-option
                  v-for="item in [{id:0,name:'科室1'},{id:1,name:'科室2'},{id:2,name:'科室3'}]"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select> -->
            </el-form-item>
            <el-form-item label="送检医生">
              <el-input placeholder="请输入姓名" v-model="params.applyDoctorName" style="width:210px"></el-input>
            </el-form-item>
            <el-form-item label="患者性别">
              <el-select v-model="params.targetSex" placeholder="请选择" style="width:210px">
                <el-option value label="全部"></el-option>
                <el-option v-for="item in [{ id: 0, name: '未知' }, { id: 1, name: '男' }, { id: 2, name: '女' }]"
                  :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="区域">
              <el-input placeholder="请输入姓名" v-model="params.wardMame" style="width:210px"></el-input>
              <!-- <el-select v-model="params.wardMame" placeholder="请选择" style="width:210px">
                <el-option value label="全部"></el-option>
                <el-option
                  v-for="item in [{id:0,name:'广东'},{id:1,name:'广西'},{id:2,name:'湖南'}]"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select> -->
            </el-form-item>
            <!-- <el-form-item label="批次其他">
              <el-input placeholder="批次/其他" v-model="params.a" style="width:210px"></el-input>
            </el-form-item> -->
            <el-form-item label="审核者">
              <el-select v-model="params.userId" placeholder="请选择" style="width:210px">
                <!-- <el-option value label="全部"></el-option> -->
                <el-option v-for="item in userList" :key="item.userId" :label="item.userName"
                  :value="item.userId"></el-option>
              </el-select>
            </el-form-item>
          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button type="primary" size="mini" @click="moreDialog = false" style="float:left">取 消</el-button>
            <el-button type="primary" size="mini" icon="el-icon-search" @click="getMoreList">查询</el-button>
            <el-button size="mini" icon="el-icon-refresh" @click="reset">重置</el-button>
          </span>
        </el-dialog>
      </div>
      <div class="main">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="first">
            <el-form :inline="true" label-width="100px">
              <el-form-item label="条码号">
                <el-input disabled v-model="ruleForm.barcodeCode" style="width:160px"></el-input>
              </el-form-item>
              <el-form-item label="项目类型" label-width="100px">
                <el-input disabled v-model="ruleForm.projectTypeName" style="width:160px"></el-input>
              </el-form-item>
              <el-form-item label="实验编号">
                <el-input disabled v-model="ruleForm.experimentNumber" style="width:160px"></el-input>
              </el-form-item>

              <el-form-item label="录入时间" label-width="100px">
                <el-input disabled v-model="ruleForm.inputDate" style="width:160px"></el-input>
              </el-form-item>
              <el-form-item label="登记时间">
                <el-input disabled v-model="ruleForm.registerCreateDate" style="width:160px"></el-input>
              </el-form-item>
              <el-form-item label="送检姓名" label-width="100px">
                <el-input disabled v-model="ruleForm.submitName" style="width:160px"></el-input>
              </el-form-item>
              <el-form-item label="送检单位">
                <el-input disabled v-model="ruleForm.inspectionUnit" style="width:160px"></el-input>
              </el-form-item>
              <el-form-item label="患者性别" label-width="100px">
                <el-input disabled v-model="sexObj[ruleForm.sex]" style="width:160px"></el-input>
              </el-form-item>
              <el-form-item label="患者年龄">
                <el-input disabled v-model="ruleForm.age" style="width:160px"></el-input>
              </el-form-item>
              <el-form-item label="核酸类型" label-width="100px">
                <el-input disabled v-model="ruleForm.nucleicTypeName" style="width:160px"></el-input>
              </el-form-item>
              <el-form-item label="样本类型">
                <el-input disabled v-model="ruleForm.sampleTypeName" style="width:160px"></el-input>
              </el-form-item>
              <el-form-item label="平台类型" label-width="100px">
                <el-input disabled v-model="ruleForm.platformTypeName" style="width:160px"></el-input>
              </el-form-item>
              <el-form-item label="是否外包">
                <el-input disabled v-model="isOutsourcersObj[ruleForm.isOutsourcers]" style="width:160px"></el-input>
              </el-form-item>
              <el-form-item label="是否符合实验" label-width="100px">
                <el-input disabled v-model="experimentalStatusObj[ruleForm.experimentalStatus]"
                  style="width:160px"></el-input>
              </el-form-item>
              <el-form-item label="区域">
                <el-input disabled v-model="ruleForm.wardMame" style="width:160px"></el-input>
              </el-form-item>
              <el-form-item label="科室" label-width="100px">
                <el-input disabled v-model="ruleForm.departmentName" style="width:160px"></el-input>
              </el-form-item>
              <el-form-item label="送检医生">
                <el-input disabled v-model="ruleForm.applyDoctorName" style="width:160px"></el-input>
              </el-form-item>
              <el-form-item label="医生电话" label-width="100px">
                <el-input disabled v-model="ruleForm.doctorPhone" style="width:160px"></el-input>
              </el-form-item>
              <el-form-item label="录单员">
                <el-input disabled v-model="ruleForm.recordName" style="width:160px"></el-input>
              </el-form-item>
              <el-menu class="el-menu-vertical-demo" :default-openeds="['1']">
          <el-submenu index="1">
            <template slot="title">
              <span>临床信息</span>
            </template>
            <el-form-item label="白细胞(10⁹/L)">
              <el-input disabled style="width:160px" v-model="ruleForm.whiteBloodCells"></el-input>
            </el-form-item>
            <el-form-item label="中性粒(%)">
              <el-input disabled style="width:160px" v-model="ruleForm.neutralGrain"></el-input>
            </el-form-item>
            <el-form-item label="淋巴细胞(%)">
              <el-input disabled style="width:160px" v-model="ruleForm.lymphocyte"></el-input>
            </el-form-item>
            <el-form-item label="CRP(mg/L)">
              <el-input disabled style="width:160px" v-model="ruleForm.CRP"></el-input>
            </el-form-item>
            <el-form-item label="PCT(mg/L)">
              <el-input disabled style="width:160px" v-model="ruleForm.PCT"></el-input>
            </el-form-item>
            <el-form-item label="前端备注">
              <el-input disabled style="width:160px" v-model="ruleForm.frontendNote"></el-input>
            </el-form-item>
            <el-form-item label="提取浓度">
              <el-input disabled style="width:160px" v-model="ruleForm.extractionConcentration"></el-input>
            </el-form-item>
            <el-form-item label="宿主率">
              <el-input disabled style="width:160px" v-model="ruleForm.rateOfHost"></el-input>
            </el-form-item>
            <el-form-item label="主诉">
              <el-input disabled style="width:160px" v-model="ruleForm.principalComplaint"></el-input>
            </el-form-item>
            <el-form-item label="临床诊断">
              <el-input disabled style="width:160px" v-model="ruleForm.clinicalDiagnosis"></el-input>
            </el-form-item>
            <el-form-item label="用药">
              <el-input disabled style="width:160px" v-model="ruleForm.medication"></el-input>
            </el-form-item>
            <el-form-item label="重点关注病原">
              <el-input disabled style="width:160px" v-model="ruleForm.focusOnPathogen"></el-input>
            </el-form-item>
            <el-form-item label="培养鉴定结果">
              <el-input disabled style="width:160px" v-model="ruleForm.cultureIdentificationResults"></el-input>
            </el-form-item>
            <el-form-item label="发病时长">
              <el-input disabled style="width:160px" v-model="ruleForm.onsetTime"></el-input>
            </el-form-item>
            <el-form-item label="DNA结果">
              <el-input disabled v-model="ruleForm.resultDna" style="width:160px"></el-input>
            </el-form-item>
            <el-form-item label="DNA检出病原">
              <el-input disabled v-model="ruleForm.resultDnaOn" style="width:160px"></el-input>
            </el-form-item>
            <el-form-item label="RNA结果">
              <el-input disabled v-model="ruleForm.resultRna" style="width:160px"></el-input>
            </el-form-item>
            <el-form-item label="RNA检出病原">
              <el-input disabled v-model="ruleForm.resultRnaOn" style="width:160px"></el-input>
            </el-form-item>
          </el-submenu>
        </el-menu>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="查看报告" name="second">
            <div class="container3" style="padding:5px">
              <!-- <div class="demo-image__preview">
                <el-image style="height: 100%;width:90%;cursor:pointer" :src="url" @click="openScanReportUrl"
                  v-if="scanReportUrl" title='点击查看预览报告'></el-image>
              </div> -->
              <iframe id='content' :src='scanReportUrl' style="width:100%;height:100%" v-if="scanReportUrl"></iframe>
            </div>
          </el-tab-pane>
          <el-tab-pane label="申请单图片" name="third">
            <div class="container3">
              <div class="demo-image__preview" v-for="el in applyList">
                <el-image style="width: 300px;height:300px;margin-top:10px" :src="el"
                  :preview-src-list="applyList"></el-image>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="日志" name="fourth">
            <div class="container4">
              <div class="container2_1">
                <!-- <div style="width:70%;overflow:auto"> -->
                <el-table ref="multipleTable" :data="logTableData" tooltip-effect="dark"
                  @selection-change="handleSelectionChange" border stripe :header-cell-style="{
  background: '#ebebeb'
}" highlight-current-row height="470">
                  <el-table-column align="center" type="index" width="55" label="序号"></el-table-column>
                  <el-table-column width="150" prop="mainState" label="操作类型" show-overflow-tooltip align="center">
                    <template slot-scope='{row}'>{{ mainStateObj[row.mainState] }}</template>
                  </el-table-column>
                  <el-table-column width="300" align="center" prop="processContent" label="操作内容"
                    show-overflow-tooltip></el-table-column>
                  <el-table-column width="300" align="center" prop="processDate" label="操作时间"></el-table-column>
                  <el-table-column width="150" align="center" prop="processPerson" label="操作人"></el-table-column>
                  <el-table-column width="150" align="center" prop="deptName" label="操作部门"></el-table-column>
                </el-table>
                <!-- </div> -->

              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
const titleOptions = ['条码号', '患者姓名', '送检单位','样本状态','项目类型','收样日期','入库日期','报告日期','患者性别','患者年龄','样本类型','核酸类型','是否符合实验','区域','结构状态','科室','送检医生','医生电话','录单员','DNA结果','DNA检出病原','RNA结果','RNA检出病原','DNA报告','RNA报告','备注']
import { arr, Arr } from "@/utils/data.js";
import { listUser } from '@/api/system/user.js'
import { unscrambleDetail, getReportPreview_test, getProcessLog, getImageList } from '@/api/reportReadManage/index.js'
import { getComprehensiveList,getComprehensiveBase } from "@/api/comprehensiveManage/comprehensiveSearchManage/comprehensiveSearch.js";

export default {
  data() {
    return {
      checkAll: false,
      isIndeterminate: true,
      sureTitle:[],
      checkedTitle:[],
      tableTitle: [],
      projectTypeList: [],
      heights: undefined,
      arr: {},
      Arr: {},
      params: {
        pageNum: 1,
        pageSize: 20,
        projectTypeId: '',
        inspectionUnit: '',
        mainState: '',
      },
      loading: false,
      listTotal: 0,
      dateList: [
        {
          title: '收样日期',
          id: 0
        },
        {
          title: '报告日期',
          id: 1
        },
        {
          title: '入库日期',
          id: 2
        },
      ],
      pickerOptions: {
        disabledDate(time){
          return time.getTime()>Date.now()
        },
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      sexObj: {
        1: '男',
        2: '女',
        3: '不限制'
      },
      mainStateObj: {
        1: "已录入",
        2: "已登记",
        3: "已入库",
        4: "已提取",
        5: "已建库",
        6: "已测序",
        7: "已分析",
        8: "已初审",
        9: "已确认初审",
        10: "已复审",
        11: "已提交",
        12: "已上传",
        13: "不上传"
      },
      experimentalStatusObj: {
        0: '未符合要求',
        1: '符合要求'
      },
      isOutsourcersObj: {
        0: '否',
        1: '是'
      },
      userList: [],
      value1: [],
      moreDialog: false,
      tableData: [],
      ruleForm: {},
      multipleSelection: [],
      logTableData: [],
      activeName: "first",
      url:
        "https://pic.imgdb.cn/item/638e1ba3b1fccdcd360cf95b.png",
      srcList: [
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
      ],
      urlList: [
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg"
      ],
      previewList: [
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg"
      ],
      scanReportUrl: '', // 预览报告
      row: {},
      applyList: [],
      restaurants: [],
      // professionalList:{}
    };
  },
  methods: {
    getTable () {
      console.log(titleOptions.length)
      this.checkedTitle = titleOptions
      this.tableTitle = titleOptions
      if (this.sureTitle.length < 1) {
        this.sureTitle = titleOptions
      }
    },
    handleCheckAllChange (val) {
      this.checkedTitle = val ? this.tableTitle : []
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange (value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.tableTitle.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.tableTitle.length
    },
    chooseTitle () {
      this.$nextTick(() => {
        this.sureTitle = this.checkedTitle
      })
      this.$refs.dropdown.hide()
    },
    openDropdown () {
      this.$refs.dropdown.show()
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    // 多个下拉框的数据
    loadAll() {
      const array = [
        this.projectTypeList,
      ];
      return array;
    },
    handleSelect(item) {
      console.log(item);
    },
    // 聚焦下拉框时
    change(i) {
      this.restaurants = this.loadAll()[i];
      // console.log(this.restaurants);
    },
    getImageList() {
      getImageList({ barcodeCode: this.row.barcodeCode }).then(res => {
        this.applyList = []
        res.data.map(el => {
          this.applyList.push('https://lrp-interface.huayinlab.com' + el.url)
        })
      })
    },
    exportAloneReport() {
      console.log(222);
      if (this.row.mainState <= 7) {
        this.$message.error('该数据未进行分析')
        return
      }
      if (Object.keys(this.row).length === 0) {
        this.$message.error('请选择数据')
        return
      }
      let data = {
        analyzeBatchNumber: this.row.analyzeBatchNumber,
        analyzeSampleNumber: this.row.analyzeSampleNumber
      }
      // console.log(data);
      getReportPreview_test(data).then(res => {
        // console.log(res)
        let url = 'http://gaotongliang.mdshuzhi.com' + res.msg.replace('/Web/WebData/Result/', '/analyze/')
        this.scanReportUrl = url
        // window.open(this.scanReportUrl)
      })
    },
    getProcessLog() {
      getProcessLog({ stateId: this.row.stateId }).then(res => {
        console.log(res);
        this.logTableData = res.data
      })
    },
    getReportPreview() {
      let data = {
        analyzeBatchNumber: this.row.analyzeBatchNumber,
        analyzeSampleNumber: this.row.analyzeSampleNumber
      }
      // console.log(data);
      getReportPreview_test(data).then(res => {
        console.log(res)
        // let url = 'http://gaotongliang.mdshuzhi.com' + res.msg.replace('/Web/WebData/Result/', '/analyze/')
        let url = 'http://hyg01.cn:6946' + res.msg.replace('/Web/WebData/Result/', '/analyze/')
        this.scanReportUrl = url
      })

    },

    // openScanReportUrl() {
    //   window.open(this.scanReportUrl)
    // },
    timeChange1() {
      if (!this.value1) {
        this.value1 = []
      }
      this.params.startTime = this.value1[0];
      this.params.endTime = this.value1[1];
    },
    getDefaultDate() {
      var now = new Date();
      var date = now.getDate();
      // now.setDate(date - 1);  //获取前一天
      var y = now.getFullYear();
      var m = (now.getMonth() + 1).toString().padStart(2, "0");
      var d = now.getDate().toString().padStart(2, "0");
      var defaultDate = y + "-" + m + "-" + d + ' ' + '00:00:00';
      var defaultDate2 = y + "-" + m + "-" + d + ' ' + '23:59:59';
      this.$set(this.value1, 0, defaultDate),
        this.$set(this.value1, 1, defaultDate2)
      this.timeChange1()
    },
    handleExport(e) {
      var different = ''
      var params = ''
      if (e === 'now') {
        different = '当前'
        params = this.params //对应接口参数
      } else if (e === 'all') {
        different = '所有'
        params = null
      } else {
        return
      }
      let that = this
      let loading
      // const queryParams = this.params;
      this.$confirm("是否确认导出" + different + "数据?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(
          function () {
            loading = that.$loading({
              lock: true,
              text: '导出中',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })
            getComprehensiveList(params).then((response) => {
              let mydata = [
                [
                  '序号',
                  '条码号',
                  '患者姓名',
                  '送检单位',
                  '状态',
                  '项目类型',
                  '收样日期',
                  '入库日期',
                  '报告日期',
                  '患者性别',
                  '患者年龄',
                  '样本类型',
                  '核酸类型',
                  '是否符合实验',
                  '区域',
                  '结果状态',
                  '科室',
                  '送检医生',
                  '医生电话',
                  '录单员',
                  'DNA结果',
                  'DNA检出病原',
                  'RNA结果',
                  'RNA检出病原',
                  'DNA报告',
                  'RNA报告',
                  '备注',
                ],
                ...response.rows.map((item, index) => ([
                  index + 1,
                  item.barcodeCode,
                  item.submitName,
                  item.inspectionUnit,
                  // item.mainState === 6 ? that.analyzeSubStateName[item.mainState] : that.mainStateName[item.mainState],
                  that.mainStateObj[item.mainState],
                  item.sampleTypeName,
                  item.collectorTime,
                  item.inputDate,
                  item.submissionReportDate,
                  that.sexObj[item.sex],
                  item.targetAge,
                  item.sampleTypeName,
                  item.nucleicTypeName,
                  item.experimentalStatus == 1 ? '符合要求' : '未符合要求',
                  item.wardMame,
                  item.name,
                  item.departmentName,
                  item.applyDoctorName,
                  item.doctorPhone,
                  item.recordName,
                  item.dnaResults,
                  item.dnaDetectablePathogen,
                  item.rnaResults,
                  item.rnaDetectablePathogen,
                  item.dnaReporting,
                  item.rnaReporting,
                  item.remark,
                ]))
              ]
              let requireMerge = []
              that.$util.createxlsx({
                mydata,
                fileName: '综合查询',
                dataList: response.rows,
                type: 'orderId',
                requireMerge,
                loading
              })
            })
          }).catch(function () { })
    },
    handleTableClick(row) {
      this.row = row
      if (row.mainState >= 7) {
        this.getReportPreview()
      }
      // getBasicInfo(row.registerId).then(res => {
      //   this.ruleForm = res.data
      // })
      // unscrambleDetail({stateId:row.stateId}).then(res=>{
      //   this.ruleForm=res.data
      // })
      getComprehensiveBase({stateId:row.stateId}).then(res=>{
        this.ruleForm=res.data
      })
      this.getProcessLog()
      this.getImageList()
    },
    openMoreDialog() {
      listUser().then(res => {
        this.userList = res.rows
      })
      this.moreDialog = true;
    },
    handleCommand(command) {
      if (command == 1) {
        window.open(this.scanReportUrl)
      }
      if (command == 2) {

      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.params.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.params.pageNum = val;
      this.getList();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    delImage(i) {
      this.urlList.splice(i, 1);
    },
    getList() {
      this.loading = true
      getComprehensiveList(this.params).then(res => {
        this.tableData = res.rows;
        this.listTotal = res.total
        this.loading = false
      });
    },
    getMoreList(){
      this.getList()
      this.moreDialog=false
    },
    reset() {
      this.params = {
        pageSize: 20,
        pageNum: 1
      }
      this.value1 = []
      this.ruleForm = {}
      this.getList()
    },
    // reset2() {
    //   this.params.recordName = ''
    //   this.params.sampleTypeName = ''
    //   this.params.departmentName = ''
    //   this.params.applyDoctorName = ''
    //   this.params.wardMame = ''
    //   this.params.targetSex = ''
    //   this.params.submitName = ''
    //   // this.getList()
    // },
  },
  created() {
    this.getTable()
    Arr.projectTypeArr.map(el => {
      this.projectTypeList.push({
        value: el.name,
        id: el.id
      })
    })
    // professional().then(res=>{
    //   console.log(res,9877);
    //   this.professionalList=res.rows
    // })
  },
  mounted() {
    this.arr = arr;
    this.Arr = Arr;
    this.getList();
    this.getDefaultDate()
    // this.$nextTick(() => {
      // 根据浏览器高度设置初始高度
      this.heights =
        window.innerHeight - this.$refs.refsTable.offsetHeight - 200;
      // 监听浏览器高度变化，修改表格高度
      window.onresize = () => {
        this.heights =
          window.innerHeight - this.$refs.refsTable.offsetHeight - 200;
      };
    // });
  },
  updated() {
    this.$refs['multipleTable'].doLayout()
  }
};
</script>

<style scoped lang="scss">
.packages {
  padding: 10px;
  margin-top: 10px;
  background-color: #fff;
  width: 100%;

  .container {
    border: 1px solid rgb(220, 223, 230);
    border-radius: 4px;
    display: flex;
    width: 100%
  }

  .aside {
    width: 43%;
    border-right: 1px solid rgb(220, 223, 230);
    padding: 10px 5px 10px 10px;
    box-sizing: border-box;
    position: relative;
  }

  .main {
    width: 57%;
    padding: 10px 0 5px 8px;
    // box-sizing: border-box;
    position: relative;
  }

  ::v-deep .el-table__body tr.current-row>td {
    background: #a8d6fe !important;
  }

  ::v-deep .el-table__body tr:hover>td {
    background: #a8d6fe !important;
  }

  ::v-deep .rowStyle {
    background-color: #a8d6fe !important;
  }

  .block {
    width: 100%;
    height: 50px;
    background-color: #fff;
    position: absolute;
    display: flex;
    flex-direction: row-reverse;
    bottom: 0px;
    right: 0px;
    z-index: 99;
  }

  .container3 {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    // justify-content: space-around;
    background-color: #d5e4fb;
    width: 100%;
    height: 70vh;
    padding: 5px 15px 5px 15px;
    overflow-y: auto
  }

  .container4 {
    padding: 5px;
    background-color: #d5e4fb;
    width: 100%;
    height: 500px;

    // height: 78vh;
    .container2_1 {
      height: 500px;
      overflow-y: auto;
      background-color: #d5e4fb;
    }
  }

  .demo-image__preview {
    position: relative;

    .el-icon-circle-close {
      position: absolute;
      right: 5px;
      top: 5px;
      z-index: 99;
      font-size: 20px;
      color: white;
      cursor: pointer;
    }
  }

  .el-form {
    .el-form-item {
      margin-bottom: 10px
    }
  }
}
</style>

